<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
                  margin: 0;
                  padding: 0;
                  font-size: 16px;
                  background: #CDCDCD;
            }

            header {
                  height: 50px;
                  background: #333;
                  background: rgba(47, 47, 47, 0.98);
            }

            section {
                  margin: 0 auto;
            }

            label {
                  float: left;
                  width: 100px;
                  line-height: 50px;
                  color: #DDD;
                  font-size: 24px;
                  cursor: pointer;
                  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            }
            header section form button{
                position: absolute;
                top: 12px;left: 710px;
            }
            header form input {
                  width: 300px;
                  height: 24px;
                  position: absolute;
                  top: 12px;left: 400px;
                  text-indent: 10px;
                  border-radius: 5px;
                  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
                  margin: 0 auto;
                  border: none
            }

            input:focus {
                  outline-width: 0
            }

            h2 {
                  position: relative;
            }

            span {
                  position: absolute;
                  top: 2px;
                  right: 5px;
                  display: inline-block;
                  padding: 0 5px;
                  height: 20px;
                  border-radius: 20px;
                  background: #E6E6FA;
                  line-height: 22px;
                  text-align: center;
                  color: #666;
                  font-size: 14px;
            }

            ol,
            ul {
                  padding: 0;
                  list-style: none;
            }

            li input {
                  position: absolute;
                  top: 2px;
                  left: 10px;
                  width: 22px;
                  height: 22px;
                  cursor: pointer;
            }

            p {
                  margin: 0;
            }

            li p input {
                  top: 3px;
                  left: 40px;
                  width: 70%;
                  height: 20px;
                  line-height: 14px;
                  text-indent: 5px;
                  font-size: 14px;
            }

            li {
                  height: 32px;
                  line-height: 32px;
                  background: #fff;
                  position: relative;
                  margin-bottom: 10px;
                  padding: 0 45px;
                  border-radius: 3px;
                  border-left: 5px solid #629A9C;
                  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
            }

            ol li {
                  cursor: move;
            }

            ul li {
                  border-left: 5px solid #999;
                  opacity: 0.5;
            }

            li a {
                  position: absolute;
                  top: 2px;
                  right: 5px;
                  display: inline-block;
                  width: 14px;
                  height: 12px;
                  border-radius: 14px;
                  border: 6px double #FFF;
                  background: #CCC;
                  line-height: 14px;
                  text-align: center;
                  color: #FFF;
                  font-weight: bold;
                  font-size: 14px;
                  cursor: pointer;
            }
    </style>
</head>
<body>
    <div id="app">
        <header>
            <section>
                  <form action="javascript:void(0)" id="form">
                        <label for="title">ToDoList</label>
                        <input v-model = "val" type="text" placeholder="添加ToDo">
                        <button @click = "addItem">添加</button>
                  </form>
            </section>
        </header>
        <div>
            <h2>
                正在进行  ---  {{ len }}
            </h2>
            <ol id="todolist" class="demo-box">
                <li v-for="(item, index) in arr" v-show = "!item.checked">
                      <input v-model = "item.checked" type="checkbox">{{ item.val }}
                      <a @click="delLi(index)" href="javascript:;">-</a>
                </li>
            </ol>
            <h2>
                已经完成  ---  {{ arr.length - len }}
            </h2>
            <ol id="todolist" class="demo-box">
                <li v-for="(item, index) in arr" v-show = "item.checked">
                      <input v-model = "item.checked" type="checkbox">{{ item.val }}
                      <button @click="delLi(index)" href="javascript:;">-</button>
                </li>
            </ol>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                val: "",
                arr: []
            },
            computed: {
                len() {
                    return this.arr.filter((item) => {
                        return item.checked === false
                    }).length
                }
            },
            methods: {
                addItem() {
                    this.arr.push({
                        val: this.val,
                        checked: false
                    })
                    this.val = ""
                },
                delLi(num){
                    this.arr.splice(num,1)
                }
            }
        })
    </script>
</body>
</html>